<template>
	<view class="form-box">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form :model="model" labelPosition='top' labelWidth='100%' ref="uForm">
			<template>
				<view v-for="item in listFrom" :key='item.name'>
					<u-form-item v-if="item.type === 'input'" :label="item.label" :prop="item.name">
						<u--input v-model="model[item.name]" :placeholder="'请输入'+item.label"></u--input>
					</u-form-item>
					<u-form-item v-if="item.type === 'number'" :label="item.label" :prop="item.name">
						<u--input v-model="model[item.name]" type='number' :placeholder="'请输入'+item.label"></u--input>
					</u-form-item>
					<u-form-item v-if="item.type === 'textarea'" :label="item.label" :prop="item.name">
						<u--textarea v-model="model[item.name]" :placeholder="'请输入'+item.label"
							autoHeight></u--textarea>
					</u-form-item>
					<u-form-item v-else-if="item.type=== 'select'" :label="item.label" :prop="item.name">
						<view @click="selectClick(item.name)">
							<u--input v-model="model[item.name]" readonly :placeholder="'请选择'+item.label"></u--input>
						</view>
						<u-picker @change='changeMethod($event,item.name)' @cancel='cancelMethod(item.name)'
							@confirm='confirmMethod($event,item.name)' :show="item.show" :columns="item.arr"
							keyName="name"></u-picker>
					</u-form-item>
					<u-form-item v-else-if="item.type=== 'date'" :label="item.label" :prop="item.name">
						<view @click="selectClick(item.name)">
							<u--input v-model="model[item.name]" readonly :placeholder="'请选择'+item.label"></u--input>
						</view>
						<!-- <u-picker @change='changeMethod($event,item.name)' @cancel='cancelMethod(item.name)'
							@confirm='confirmMethod($event,item.name)' :show="item.show" :columns="item.arr"
							keyName="name"></u-picker> -->
						<u-datetime-picker :show="item.show" @cancel='dateCancelMethod($event,item.name)'
							@confirm="dateMethod($event,item.name)" :minDate='0' mode="date"></u-datetime-picker>

					</u-form-item>
					<u-form-item v-if="item.type === 'radio'" :label="item.label" :prop="item.name">
						<u-radio-group v-model="model[item.name]" placement="row" @change="radioChange($event,item)"
							style="flex-wrap: wrap ">
							<u-radio :customStyle="{paddingRight: '12px'}" v-for="(m, index) in item.arr" :key="index"
								:label="m.name" :name="m.value">
							</u-radio>
						</u-radio-group>
						<!-- <myForm :listFrom='item.children.listFrom' :model="item.children.model"></myForm> -->
					</u-form-item>
					<u-form-item v-if="item.type === 'checkbox'" :label="item.label" :prop="item.name">
						<u-checkbox-group v-model="model[item.name]" placement="row"
							@change="checkboxChange($event,item)">
							<u-checkbox :customStyle="{paddingRight: '12px'}" v-for="(m, index) in item.arr"
								:key="index" :label="m.name" :name="m.value">
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item v-if="item.type === 'calendar'" :label="item.label" :prop="item.name">
						<view @click="calendarClick(item.name)">
							<u--input v-model="model[item.name]" readonly :placeholder="'请选择'+item.label"></u--input>
						</view>
						<u-calendar @confirm='calendarConfirm($event,item.name)' @close='calendarClose(item.name)'
							:show="item.show"></u-calendar>
					</u-form-item>
				</view>
			</template>
		</u--form>
	</view>
</template>

<script>
	import myForm from './index.vue'

	export default {
		data() {
			return {
				listFrom: [],
				model: {},
				rules: {},
				formEl: ''
			};
		},
		watch: {
			list: {
				handler(data) {
					this.listFrom = data
				},
				immediate: true
			},
			listData: {
				handler(data) {
					console.log('model', data);
					this.model = data
				},
				deep: true,
				immediate: true
			}
		},
		props: {
			list: {
				type: Array,
				required: true
			},
			listData: {
				type: Object,
				required: true
			},
			listRules: {
				type: Object,
				required: false
			},
		},
		methods: {
			sexSelect(e) {
				this.model.sex = e.name
			},
			dateCancelMethod(data, name) {
				this.listFrom.forEach(item => {
					if (item.name === name) {
						// this.model[item.name] = this.timestampToTime(data.value)
						// console.log(this.timestampToTime(data.value));
						item.show = false
					}
				})
			},
			submitClick() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					this.$emit('submit', this.form)
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			selectClick(name) {
				console.log(name);
				this.listFrom.forEach(item => {
					if (item.name === name) {
						item.show = true
					}
				})
			},
			calendarClick(name) {
				this.listFrom.forEach(item => {
					if (item.name === name) {
						item.show = true
					}
				})
			},
			cancelMethod(name) {
				console.log(name);
				this.listFrom.forEach(item => {
					if (item.name === name) {
						item.show = false
					}
				})
			},
			changeMethod(data, name) {
				// this.listFrom.forEach(item => {
				// 	if (item.name === name) {
				// 		this.model[item.name] = data.value[0].name
				// 	}
				// })
			},
			confirmMethod(data, name) {
				this.listFrom.forEach(item => {
					if (item.name === name) {
						this.model[item.name] = data.value[0].name
						item.show = false
					}
				})
			},
			timestampToTime(timestamp) {
				timestamp = timestamp ? timestamp : null;
				let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D
				// + h + m + s;
			},
			dateMethod(data, name) {
				this.listFrom.forEach(item => {
					if (item.name === name) {
						this.model[item.name] = this.timestampToTime(data.value)
						console.log(this.timestampToTime(data.value));
						item.show = false
					}
				})
			},
			calendarConfirm(data, name) {
				this.listFrom.forEach(item => {
					if (item.name === name) {
						console.log(data);
						this.model[item.name] = data[0]
						item.show = false
					}
				})
			},
			calendarClose(name) {
				this.listFrom.forEach(item => {
					if (item.name === name) {
						item.show = false
					}
				})
			},
			radioChange(data, item) {
				if (item.cid) {
					if (data === item.cid) {
						let index = this.listFrom.findIndex(t => {
							return t.name === item.name
						})
						let otherIndex = this.listFrom.findIndex(t => {
							return t.name === item.children.name
						})
						if (otherIndex < 0) {
							this.listFrom.splice(index + 1, 0, item.children)
							this.model[item.children.name] = ''
						}
					} else {
						let index = this.listFrom.findIndex(t => {
							return t.name === item.children.name
						})
						if (index >= 0) {
							console.log(this.listFrom[index].name);
							this.model[this.listFrom[index].name] = ''
							this.listFrom.splice(index, 1)
						}
					}
				}
			},
			checkboxChange(data, item) {
				console.log(data, item);

				if (item.cid) {
					let i = data.findIndex(m => {
						return m === item.cid
					})
					let id = data[i]
					if (id && id === item.cid) {
						let index = this.listFrom.findIndex(t => {
							return t.name === item.name
						})
						let otherIndex = this.listFrom.findIndex(t => {
							return t.name === item.children.name
						})
						if (otherIndex < 0) {
							this.listFrom.splice(index + 1, 0, item.children)
							this.model[item.children.name] = ''
						}

					} else {
						let index = this.listFrom.findIndex(t => {
							return t.name === item.children.name
						})
						console.log(index);
						if (index >= 0) {
							console.log(this.listFrom[index].name);
							this.model[this.listFrom[index].name] = ''
							this.listFrom.splice(index, 1)
						}
					}
				}
			}
		},
		components: {
			myForm
		},
		created() {
			// this.listFrom = this.list
			// this.model = this.listData
			// this.rules = this.listRules

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.listFrom = this.list
			this.model = this.listData
			this.rules = this.listRules
			this.formEl = this.$refs.uForm
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style lang="scss">
	@import 'index.scss'
</style>